﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>超级英雄你来猜</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

  <meta name="description" content=""/>
  <meta name="Keywords" content=""/>

  <link href="/images/favicon.ico" type="image/x-icon" rel="icon">
  <link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon">
  <link href="/images/touch-icon-iphone.png" rel="apple-touch-icon">
  <link href="css/common.css" rel="stylesheet" type="text/css"/>
  <link href="css/commontwo.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" href="css/jquery.fullPage.css">
  <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
  <script type="text/javascript" src="js/fontSize.js"></script>
  </head>
  
  <style type="text/css">
.layer-bg{ display: none; width: 100%; height:100%; background: rgba(0,0,0,.8); position: fixed; z-index: 99; top: 0; left: 0;}
.layer-box,.layer-box-error{width: 20rem;height:8rem; padding: 2rem 0; background: #fff url(images/activity/childactivity/layer-bg.png) no-repeat ; background-size: .35rem auto; background-position: .16rem .20rem; position: fixed; left: 50%; margin-left: -10rem; top: 50%;z-index: 100; text-align: center; font-size: 1.3rem; color: #333; line-height: 2rem; margin-top: -1rem; border-radius: .1rem; box-shadow: 0px 0px 10px rgba(235,71,19,.5); font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(.5rem) scale(.8); transition-duration: .5s; -webkit-transition-duration: .5s;}
.layer-box .layer-close, .layer-box .share-close, .layer-box-error .layer-close{background: url(images/activity/childactivity/layer-close.png) no-repeat center; position: absolute; right: 0.5rem; top: 0.5rem; width: 2rem; height: 2rem; background-size: cover; }
.share-arrow{ background: url(images/activity/childactivity/share-arrow.png) no-repeat center; background-size: cover; width: 4.4rem; height: 5.6rem; position: fixed; z-index: 100; top: 3rem; right:3rem; opacity: 0;  pointer-events: none; transition-duration: .5s; -webkit-transition-duration: .5s;}
.share-arrow.show,.layer-box.show,.layer-box-error.show{ opacity: 1; transform: translateY(0rem) scale(1); pointer-events: all; }
.share-arrow.show{animation: move 1.5s ease infinite ; }
    	@keyframes move{
    	    0%,100%{transform: translate(-10px,10px);}
    	    50%{transform: translate(0,0);}
    	}    
.section1
{
	background:url(images/activity/childactivity/child_activity01.jpg) no-repeat;
	background-size: cover;
}
.section2
{
	background:url(images/activity/childactivity/child_activity02.jpg) no-repeat;
	background-size: cover;
}

#child-activity-menu { margin-right:0rem; position: fixed; right:1rem;top:26rem; list-style-type: none; z-index: 70;}
#child-activity-menu li { margin-bottom:1rem;}
#child-activity-menu a { width:1rem; height:1rem; display:block; border-radius:1rem; background-color: #fff; color: #333; text-decoration: none; opacity:0.5;}
#child-activity-menu .active a { color: #fff; background-color: #333;}

.header-child-activity .header{ height:64px;}
.header-child-activity .header h1{line-height:64px;}
.header-child-activity .header .btn_back{ top:21px;}
.header-child-activity .header-activity{
	background:url(images/common/icon_back.png) no-repeat;
}
.container-activity{
	padding-bottom:0rem;
}
/*六一活动*/
.child-activity{
	width:100%;
	height:100%;
}
.child-activity img{
	height:100%;
	width:100%;
	display:block;
	margin:0 auto;
}
.child-activity .child-activity-ad2{
	position:relative;
	height:100%;
}
.child-activity .child-activity-ad2 a{
	position: absolute;
    width: 64%;
    height: 8%;
    margin-left: -32%;
    display: block;
    left: 50%;
    bottom: 10%;
}

.child-activity .child-activity-ad3{
	position:relative;
	height: 100%;
}
.child-activity .child-activity-ad3 a{
	position: absolute;
    width: 64%;
    height: 9%;
    margin-left: -32%;
    display: block;
    left: 50%;
    bottom:3%;
}

.child-activity .child-activity-ad4{
	position:relative;
	height: 100%;
}
.child-activity .child-activity-ad4 a{
	position: absolute;
    width: 64%;
    height: 9%;
    margin-left: -32%;
    display: block;
    left: 50%;
    bottom:3%;
}
.child-activity-ad4-con{
	position:absolute;
	top:0px;
	left:0px;
	width:80%;
	margin-left:10%;
}
.child-activity-ad4-con img{
	width:46%;
	height:46%;
}
.child-activity-ad4-con>p{
	width:80%;
	margin:8% auto 0;
	text-align:center;
	font-size:1.1rem;
	color:#333;
}
.child-activity-ad4-con .child-img{
	width:12rem;
	height:12rem;
	margin:35% auto 0;
}
.child-activity-ad4-con .child-img img{
	width:100%;
	height:100%;
}
.child-activity-ad4-con .child-activity-input{
	margin-top:5rem;
}
.child-activity-ad4-con .child-activity-input .input-txt{
	height:4rem;
	line-height:4rem;
	background-color:#fff;
	border-radius:0.4rem;
	margin-bottom:6%;
	box-shadow: 0 0 1rem #e2310c;
}
.child-activity-ad4-con .child-activity-input .input-txt b{
	width:28%;
	margin-right:5%;
	display:inline-block;
	text-align:right;
	color:#333;
	float:left;
	font-size:1.1rem;
}
.child-activity-ad4-con .child-activity-input .input-txt input{
	border:none;
	float:left;
	height:4rem;
	width:67%;
	font-size:1.3rem;
	color:#e56740;
} 
/* music */
    @-webkit-keyframes reverseRotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(-360deg);}
    }
    @-webkit-keyframes rotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(360deg);}
    }
    #musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
    #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url(images/activity/childactivity/mcbg.png) no-repeat;background-size:100%;}
    #musicControl a audio{width:100%;height:56px;}
    #musicControl a.stop { background-position:left bottom;}
    #musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
    #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
</style>

<body>
	<div style='margin:0 auto;display:none;'>
    	<img src="images/activity/childactivity/icon.png" />
    </div>
    <span id="musicControl">
        <a id="mc_play" class="stop" onclick="play_music();">
            <audio id="musicfx" loop autoplay>
                <source src="music/ACDC-ShoottoThrill.mp3" type="audio/mpeg">
            </audio>
        </a>
 	</span>
    <div class="child-activity-index">
        <div class="child-activity">
            <div class="section section1">
           
            </div>
            <div class="section section2">
                <div class="child-activity-ad2">
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <ul id="child-activity-menu">
            <li data-menuanchor="page1" class="active"><a href="#page1"></a></li>
            <li data-menuanchor="page2"><a href="#page2"></a></li>
        </ul>
    </div>
    
    <div class="child-activity child-activity2" style="display:none;">
      <div class="child-activity-ad3">
      	<img src="images/activity/childactivity/child_activity03.jpg">
        <a href="#" class="btnSubmit"></a>
      </div>
    </div>
    
    <div class="child-activity child-activity3" style="display:none;">
      <div class="child-activity-ad4">
      	<img src="images/activity/childactivity/child_activity04.jpg">
        <a href="#" onclick="guess()" class="btn"></a>
        <div class="child-activity-ad4-con">
        	<div class="child-img"><img src="images/activity/childactivity/child1.jpg"></div>
            <p>提示：<span class="tipShow">一个忧郁的富二代（三个字）</span></p>
            <form>
            	<div class="child-activity-input">
                	<div class="input-txt">
                        <b>输入昵称：</b>
                        <input class="form-control" id="nickName" type="text" placeholder="点击输入昵称" maxlength="20">
                    </div>
                    <div class="input-txt">
                        <b>英雄名字：</b>
                        <input class="form-control" id="heroName" type="text" placeholder="点击输入英雄名字" maxlength="4">
                    </div>
                	<input id="hiddenNum" type="hidden" value="0">
                </div>
            </form>
        </div>
      </div>
      	<div class="layer-bg"></div>
        <div class="share-arrow"></div>
        <div class="layer-box">
            <div class="share-close" id="close"></div>
            点击右上角分享<br>告知大家一起参与
        </div>
	<div class="layer-box-error">
	        <div class="layer-close"></div>
	        很遗憾，回答错误<br>请重新回答
	    </div>
    </div>
</body>
<script type="text/javascript">
	/*第一屏上下滚动*/
    $(function() {
            $(".child-activity-index .child-activity").fullpage(
                {
                    continuousVertical: false,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2'],
                    menu: '#child-activity-menu',
                });
				
        });
    $(function(){
		$(".child-activity-ad2 a").click(function(){
			$(this).parents(".child-activity-index").hide().siblings(".child-activity2").show();
		})
		$(".child-activity .child-activity-ad3 a").click(function(){
			$(this).parents(".child-activity2").hide().siblings(".child-activity3").show();
		})
	})
</script>

<script>
var nameTips = [{"tip":"嘴贱+话唠+死不了(两个字)","name":"死侍"},
                {"tip":"拿锤子的金发男(四个字)","name":"雷神索尔"},
                {"tip":"千万别惹他生气(三个字)","name":"绿巨人"},
                {"tip":"亚马逊女神(四个字)","name":"神奇女侠"},
                {"tip":"耍贱卖萌高空杂技(三个字)","name":"蜘蛛侠"},
                {"tip":"一个忧郁的富二代(三个字)","name":"蝙蝠侠"},
                {"tip":"地球人的外星儿子(两个字)","name":"超人"},
                {"tip":"技术宅花花公子(三个字)","name":"钢铁侠"},
                {"tip":"高人气变种人(三个字)","name":"金刚狼"},
                {"tip":"他代表美利坚(四个字)","name":"美国队长"}];
                
		/*随机图片*/
		 $(function () {
			var num = Math.floor(Math.random() * 9);
			$("#hiddenNum").val(num);
            $('.child-activity-ad4-con img').attr('src','images/activity/childactivity/child'+num+'.jpg');
	          for(var t=0; t<nameTips.length; t++){
	              if(t == num){
	                $(".tipShow").text(nameTips[t].tip);
	              }
	          }
     })
     
     
     
     function guess() {
			
			 var nickName = $("#nickName").val();
             if (nickName == "" || nickName == undefined || nickName == null) {
           	  return;
             }

             var heroName = $("#heroName").val();
             if (heroName == "" || heroName == undefined || heroName == null) {
           	  return;
             }
             var heroImgUrl = $(".child-activity-ad4-con img").attr("src");
             var start = heroImgUrl.lastIndexOf('/');
//              alert(heroName + "===" + nameTips[$("#hiddenNum").val()].name)
             if(heroName == nameTips[$("#hiddenNum").val()].name){
            	 $.ajax({
 					type : "GET",
 					async : false,
 					dataType : "JSON",
 					cache : false,
 					url : "../guessHero.do",
					data:{
                	  "nickName":nickName,
                	  "guessName":heroName,
                	  "heroImgId":$("#hiddenNum").val()
                  },
 					success : function(data) {
 						if (data.code == "10000") {
 	                        $(".share-arrow,.layer-box").addClass("show");
 	                        $(".layer-bg").fadeIn(500);
 	                        //关闭
 	                        $("#close").click(function(){
 	                          $(".share-arrow,.layer-box").removeClass("show");
 	                          $(".layer-bg").delay(200).fadeOut(400);
 	                        });
 	  					  }
 					}//end-callback
 				});//end-ajax
             } else {
            	 	$(".layer-box-error").addClass("show");
	                $(".layer-bg").fadeIn(500);
	                //关闭
	                console.log("bbudjlgi");
	                $(".layer-close").click(function(){
	                	$(".layer-box-error").removeClass("show");
	                 	$(".layer-bg").delay(200).fadeOut(400);
	                 	var num = Math.floor(Math.random() * 9);
	        			$("#hiddenNum").val(num);
	                    $('.child-activity-ad4-con img').attr('src','images/activity/childactivity/child'+num+'.jpg');
	        	          for(var t=0; t<nameTips.length; t++){
	        	              if(t == num){
	        	                $(".tipShow").text(nameTips[t].tip);
	        	              }
	        	          }
	        	          $("#heroName").val("");
	                });
	                
             }
		}
     
     
	</script>
	 <script type="text/javascript"><!-- 音乐-->
        function play_music(){
        if ($('#mc_play').hasClass('on')){
            $('#mc_play audio').get(0).pause();
            $('#mc_play').attr('class','stop');
        }else{
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','on');
        }
        $('#music_play_filter').hide();
        event.stopPropagation(); //阻止冒泡 
    }
    function just_play(id){
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class','on');
        if (typeof(id)!='undefined'){
            $('#music_play_filter').hide();
        }
        event.stopPropagation(); //阻止冒泡 
    } 
    function is_weixn(){
        return false;
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var play_filter=document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchend', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function(){
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousemove',function(){
        just_play(1);
    });
    window.onload=function(){
        if (!is_weixn()){
            just_play();
        }
    } 
    </script>
</html>

